<template>
    <div>
        <v-container class="fill-height" fluid>
            <v-row align="center" justify="space-around">
                <v-col class="text-center" cols="12">
                    <v-avatar :size="size">
                        <img :src="src" alt="multiavatar">
                    </v-avatar>
                </v-col>
                <v-col class="text-center" cols="12">
                    <v-btn icon>
                        <v-icon @click="download">mdi-file-download</v-icon>
                    </v-btn>
                    <v-btn icon>
                        <v-icon @click="random">mdi-sync</v-icon>
                    </v-btn>
                    <v-btn icon>
                        <v-icon @click="upload">mdi-cloud-upload</v-icon>
                    </v-btn>
                </v-col>
                <v-col class="text-center" cols="12" md="5">
                    <v-sheet>
                        <v-text-field
                                v-model="dynamic"
                                placeholder="avatar"
                                prefix="https://api.multiavatar.com/"
                                suffix=".svg"
                                append-outer-icon="mdi-content-copy"
                                solo
                                @click:append-outer="copy($event,src)"
                        ></v-text-field>

                    </v-sheet>
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>

<script>
    import Clipboard from "clipboard"
    import {DownloadAvatarAsSvg, DownloadAvatarAsPng} from "../../../api/avatar";
    import {PatchOneUser} from "@/api/user";
    import {mapMutations, mapGetters} from "vuex"
    export default {
        name: "index",
        data() {
            return {
                prefix: "https://api.multiavatar.com/",
                suffix: ".svg",
                size: 231,
                dynamic: "",
                lazy: "`https://picsum.photos/10/6?image=15`"
            }
        },
        computed: {
            ...mapGetters(["user"]),
            src() {
                const middle = this.dynamic === "" ? "avatar" : this.dynamic
                return this.prefix + middle + this.suffix
            },
            href() {
                return this.src.replace(".svg", ".jpg")
            }
        },
        methods: {
            ...mapMutations(["updateUserInfo"]),
            random() {
                this.dynamic = Math.random().toString().substr(2, 8);
            },
            copy(e, text) {
                const clipboard = new Clipboard(e.target, {text: () => text})
                clipboard.on('success', e => {
                    this.$msg.success(text + ' copied')
                    // 释放内存
                    clipboard.off('error')
                    clipboard.off('success')
                    clipboard.destroy()
                })
                clipboard.on('error', e => {
                    // 不支持复制
                    this.$msg.warn('该浏览器不支持自动复制')
                    // 释放内存
                    clipboard.off('error')
                    clipboard.off('success')
                    clipboard.destroy()
                })
                clipboard.onClick(e)
            },
            upload() {
                this.$msg.info("明天实现")
                PatchOneUser(this.user.id, {avatar: this.src}).then(res=>{
                    this.$msg.success("头像保存成功")
                    this.updateUserInfo(res.body)
                })
            },
            download() {
                // this.$msg.info("Blob, See you tomorrow")
                // DownloadAvatarAsSvg(this.src, this.dynamic)
                DownloadAvatarAsPng(this.src, this.dynamic)
            }
        }
    }
</script>

<style scoped>

</style>